<template>
	<div id="login">
		<main>
			<div class="wos-flex">
				<div><img src="/assets/images/evs-LOGO.png" alt=""></div>
				<div class="title">管理系统</div>
			</div>
			<div class="wos-flex">
				<div id="banner">
					<img src="/assets/images/EVS.png" alt="">
				</div>
				<div id="forms">
					<div class="input mb10">
						<span class="iconfont icon-yonghu" ></span>
						<input type="text" placeholder="用户名" class="inputText" v-model="username">
					</div>
					<div class="input mb10">
						<span class="iconfont icon-lock"></span>
						<input type="password" placeholder="密码" class="inputText" v-model="password" @keyup.enter="login">
					</div>
					<div class="input mb10">
						<select name="" id="">
							<option value="tcp">TCP</option>
							<option value="udp">UDP</option>
							<option value="group">组播</option>
						</select>
					</div>
					<div class="mb10 formatTxt wos-hand" @click="formatPassword = 1">忘记密码?</div>
					<div class="mb10 wos-flex wos-flex-between">
						<div class="wos-align-left" style="width: 50%">
							<input name="net" type="radio" value="lan" id="lan" checked/>
							<label for="lan"> LAN</label>
						</div>
						<div class="wos-align-left" style="width: 50%">
							<input name="net" type="radio" value="wan" id="wan"/>
							<label for="wan"> WAN</label>
						</div>
					</div>
					<div class="mb10">
						<button class="btn-login" @click="login">登录</button>
					</div>
				</div>
			</div>
		</main>
		<footer>
			<i class="iconfont icon-privatelogo"></i>
			<span>2020.All.Reserved. | Design By UED </span>
		</footer>
<!--忘记密码弹出框-->
		<div id="formatPassword" v-show="formatPassword > 0">
			<div id="formatPassword-step1" class="cc" v-if="formatPassword === 1">
				<div class="title pad">重置密码(1/3)</div>
				<div class="content pad wos-flex">
					<div><i class="iconfont icon-warning wos-icon-warning" style="font-size:20px"></i></div>
					<div>为帮助您重置设备密码，我们会收集您的手机号码、MAC地址、设备序列号等信息。收集的信息仅用于验证设备合法性以及发送安全码。是否同意并继续操作？</div>
				</div>
				<div class="btns pad wos-align-right">
					<button class="wos-btn wos-btn-yes wos-hand" @click="formatPassword = 2">确定</button>
					<button class="wos-btn wos-btn-no wos-hand" @click="formatPassword = 0">取消</button>
				</div>
			</div>


			<div id="formatPassword-step2" class="cc" v-if="formatPassword === 2">
				<div class="title pad">重置密码(2/3)</div>
				<div class="content">
					<p>SN:*************E0390</p>
					<p>请扫描二维码</p>
					<div class="wos-flex">
						<div><img src="/assets/images/ercode100.png" style="width: 300px"></div>
						<div class="makd">
							<div>
								说明(仅支持admin用户)：<br>1、请通过关注微信公众号'浙江大华售后服务'-'我的服务'-'密码重置'扫描二维码。<br>2、请下载登录'浙江大华售后服务APP'-'我的服务'-'密码重置'扫描二维码。<br>3、若使用其他方式，请将扫描结果编辑短信发送至中国移动/中国电信：10690669121821，中国联通：10690067121821。
							</div>
						</div>
					</div>
					<p></p>
					<p>安全码将发送到您的预留手机：185****5706</p>
					<p>
						<span>请输入安全码：</span>
						<input type="text" v-model="formatPasswordCode">
					</p>
				</div>
				<div class="btns pad wos-align-right">
					<button class="wos-btn  wos-hand" :class="formatPasswordCode.length>8 ? 'wos-btn-yes' : 'wos-btn-disable'" @click="formatPassword = 3">下一步</button>
					<button class="wos-btn wos-btn-no wos-hand" @click="formatPassword = 0">取消</button>
				</div>
			</div>


			<div id="formatPassword-step3" class="cc" v-if="formatPassword === 3">
				<div class="title pad">重置密码(3/3)</div>
				<div class="content">
					<p>
						<i class="iconfont icon-info2"></i>
						安全码校验失败</p>
				</div>
				<div class="btns pad wos-align-right">
					<button class="wos-btn  wos-hand" :class="formatPasswordCode.length>8 ? 'wos-btn-yes' : 'wos-btn-disable'" @click="verfiy">确定</button>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
    export default {
        name: "Login",
	    data:function(){
            return{
                username:"",
	            password:"",
                formatPassword:0,
                formatPasswordCode:""
            }
	    },
	    methods:{
            verfiy(){
                this.formatPassword = 0
	            this.formatPasswordCode = ""
            },
		    login(){
                console.log( this.$config.username , this.username)
				if ( this.$config.username === this.username && this.$config.password === this.password){
                    this.$router.push('/home')
				}else{
				    alert("用户名或密码不正确")
				}
		    }
	    }
    }
</script>

<style scoped lang="less">
	#formatPassword{
		background-color: rgba(255,255,255,0.2);
		position: fixed;
		top:0;
		width: 100vw;
		height: 100vh;
		.cc{
			width: 600px;
			background-color: #FFFFFF;
			border-radius: 5px;
			box-shadow: 5px 5px 5px #DDDDDD;
			.pad{
				padding: 10px 20px;
			}
			.title{
				background-color: #EEEEEE;
				padding-left: 30px;
				font-weight: 500;
			}
			.btns{
				border-top: 1px solid #EEEEEE;
				.wos-btn{
					margin-left:10px;
				}
			}
		}
		#formatPassword-step3{
			margin:300px auto 0 auto;
			.content{
				padding: 20px;
			}
		}
		#formatPassword-step2{
			margin:100px auto 0 auto;
			.content{
				padding:20px ;
				p{
					height: 38px;
				}
				.makd{
					div{
						margin: 5px;
						padding: 20px 10px;
						border: 1px solid #333333;
						height: 300px;
					}
				}
				input{
					width: 400px;
					border: 1px solid #D4D4D4;
					height: 28px;
					line-height: 28px;
					text-indent: 10px;
				}
			}
		}
		#formatPassword-step1{
			margin:300px auto 0 auto;
			.content{
				.iconfont{
					margin-right: 10px;
				}
			}

		}
	}
	#login{
		height: 200px;
		padding-top: 200px;
	}
	main{
		width: 1000px;
		margin: 0 auto;
		.title{
			font-size: 25px;
			position: absolute;
			padding-left: 110px;
			margin-top: -5px;
		}
		#forms{
			background-color: #ffffff;
			width: 320px;
			height: 360px;
			padding: 40px;
			.input{
				border: 1px solid #DDDDDD;
				padding: 5px;

				.iconfont{
					font-size: 20px;
					color:#333333;
				}
				.inputText{
					border: 0px;
					height: 30px;
					text-indent: 10px;
					width: 90%;
				}
				select{
					border: 0px;
					width: 100%;
				}
				.formatTxt{
					height: 20px;
				}
			}
			.mb10{
				margin-bottom: 15px;
			}
			.btn-login{
				width: 100%;
				background-color: #349AEF;
				height: 40px;
				color:#FFFFFF;
				border: 0px;
				font-size: 1rem;
			}
		}
	}
	footer{
		background-color: @background-blue;
		color:#89c2ce;
		height: 58px;
		line-height: 58px;
		width: 100vw;
		text-align: center;
		position: fixed;
		bottom: 0px;
		i{
			font-size: 5rem;
			position: absolute;
			margin-left: -100px;
		}
	}
</style>
